// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 更新时间显示
    updateTime();
    setInterval(updateTime, 60000); // 每分钟更新一次时间
    
    // 添加导航标签点击事件
    setupNavTabs();
    
    // 添加底部导航点击事件
    setupBottomNav();
    
    // 初始化播放控制
    setupPlayControls();
    
    // 添加歌曲项点击事件
    setupSongItems();
    
    // 添加心形图标点击事件
    setupHeartIcons();

    // 添加页面切换动画
    setupPageTransitions();

    // 检查是否在歌单详情页，如果是则隐藏底部导航
    if (window.location.pathname.includes('playlist.html')) {
        document.querySelector('.bottom-nav').classList.add('hide-nav');
    }
});

// 更新时间显示
function updateTime() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const timeStr = `${hours}:${minutes}`;
    
    const timeElements = document.querySelectorAll('.time');
    timeElements.forEach(element => {
        element.textContent = timeStr;
    });
}

// 设置导航标签点击事件
function setupNavTabs() {
    const tabs = document.querySelectorAll('.nav-tabs .tab');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // 移除所有活动状态
            tabs.forEach(t => t.classList.remove('active'));
            
            // 添加当前活动状态
            this.classList.add('active');
            
            // 这里可以添加切换内容的逻辑
            console.log(`切换到${this.textContent}标签`);
        });
    });
}

// 设置底部导航点击事件
function setupBottomNav() {
    const navItems = document.querySelectorAll('.bottom-nav .nav-item');
    
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有活动状态
            navItems.forEach(i => i.classList.remove('active'));
            
            // 添加当前活动状态
            this.classList.add('active');
            
            // 获取导航项的文本
            const navText = this.querySelector('span').textContent;
            
            // 导航逻辑
            switch(navText) {
                case '首页':
                    window.location.href = 'index.html';
                    break;
                case '搜索':
                    // 搜索页面逻辑
                    console.log('导航到搜索页面');
                    break;
                case '社区':
                    // 社区页面逻辑
                    console.log('导航到社区页面');
                    break;
                case '我的':
                    // 我的页面逻辑
                    console.log('导航到我的页面');
                    break;
                case '直播':
                    // 直播页面逻辑
                    console.log('导航到直播页面');
                    break;
            }
        });
    });
}

// 设置播放控制
function setupPlayControls() {
    // 处理所有播放按钮
    const playButtons = document.querySelectorAll('.fa-play');
    
    playButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            // 阻止事件冒泡
            event.stopPropagation();
            
            // 切换播放/暂停状态 (仅UI示例，无实际音频播放)
            if (this.classList.contains('fa-play')) {
                this.classList.remove('fa-play');
                this.classList.add('fa-pause');
                console.log('播放音乐');
            } else {
                this.classList.remove('fa-pause');
                this.classList.add('fa-play');
                console.log('暂停音乐');
            }
        });
    });
    
    // 全部播放按钮
    const playAllButton = document.querySelector('.play-all-button');
    if (playAllButton) {
        playAllButton.addEventListener('click', function() {
            console.log('播放全部歌曲');
        });
    }
}

// 设置歌曲项点击事件
function setupSongItems() {
    const songItems = document.querySelectorAll('.song-item');
    
    songItems.forEach(item => {
        item.addEventListener('click', function() {
            // 获取歌曲标题
            const title = this.querySelector('.song-title').textContent;
            // 获取歌手名称
            const artist = this.querySelector('.song-artist') 
                ? this.querySelector('.song-artist').textContent
                : this.querySelector('.song-subtitle').textContent;
            
            console.log(`播放歌曲: ${title} - ${artist}`);
            
            // 在播放列表页面，可以高亮显示当前播放的歌曲
            songItems.forEach(i => i.classList.remove('playing'));
            this.classList.add('playing');
            
            // 更新迷你播放器信息
            updateMiniPlayer(title, artist);
        });
    });
}

// 更新迷你播放器信息
function updateMiniPlayer(title, artist) {
    const miniTitle = document.querySelector('.mini-title');
    if (miniTitle) {
        miniTitle.textContent = `${title} - ${artist}`;
    }
    
    // 可以在这里添加更多迷你播放器更新逻辑
}

// 设置心形图标点击事件
function setupHeartIcons() {
    const heartIcons = document.querySelectorAll('.fa-heart');
    
    heartIcons.forEach(icon => {
        icon.addEventListener('click', function(event) {
            // 阻止事件冒泡
            event.stopPropagation();
            
            // 切换收藏状态
            if (this.classList.contains('far')) {
                this.classList.remove('far');
                this.classList.add('fas');
                console.log('已收藏');
            } else {
                this.classList.remove('fas');
                this.classList.add('far');
                console.log('取消收藏');
            }
        });
    });
}

// 页面切换动画设置
function setupPageTransitions() {
    // 首页到歌单详情页的切换
    if (window.location.pathname.includes('index.html') || window.location.pathname.endsWith('/') || window.location.pathname.endsWith('music_app/')) {
        // 为跳转到歌单详情页的卡片添加点击事件
        const playlistCard = document.querySelector('.card.daily-playlist');
        if (playlistCard) {
            playlistCard.addEventListener('click', function(event) {
                event.preventDefault();
                
                // 获取相关元素
                const appContainer = document.querySelector('.app-container');
                const bottomControls = document.querySelector('.bottom-controls-container');
                const bottomNav = document.querySelector('.bottom-nav');
                const bottomPlayer = document.querySelector('.bottom-player');
                
                // 1. 首先淡出页面内容
                appContainer.classList.add('fade-out');
                
                // 2. 开始底部导航和播放器的过渡动画
                bottomNav.classList.add('transitioning');
                bottomPlayer.classList.add('transitioning');
                
                // 3. 300ms后完成导航，这时候页面淡出效果已完成
                setTimeout(() => {
                    window.location.href = 'playlist.html';
                }, 300);
            });
        }
    }
    
    // 歌单详情页到首页的切换
    if (window.location.pathname.includes('playlist.html')) {
        const backButton = document.querySelector('.back-button');
        if (backButton) {
            backButton.addEventListener('click', function(event) {
                event.preventDefault();
                
                // 获取应用容器和底部控件
                const appContainer = document.querySelector('.app-container');
                const bottomControls = document.querySelector('.bottom-controls-container');
                const bottomNav = document.querySelector('.bottom-nav');
                const bottomPlayer = document.querySelector('.bottom-player');
                
                // 1. 首先淡出页面内容
                appContainer.classList.add('fade-out');
                
                // 2. 开始底部导航和播放器的返回过渡动画
                // 先移除可能存在的transitioning类
                bottomNav.classList.remove('transitioning');
                bottomPlayer.classList.remove('transitioning');
                
                // 添加returning类，触发返回动画
                bottomNav.classList.add('returning');
                bottomPlayer.classList.add('returning');
                
                // 3. 300ms后完成导航，这时候页面淡出效果已完成
                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 300);
            });
        }
    }
    
    // 页面加载时的动画效果
    window.addEventListener('load', function() {
        const appContainer = document.querySelector('.app-container');
        
        // 页面载入时的淡入效果
        appContainer.classList.add('fade-in');
        
        if (window.location.pathname.includes('playlist.html')) {
            // 在歌单页面加载完成时，确保播放器样式正确
            const bottomPlayer = document.querySelector('.bottom-player');
            const bottomNav = document.querySelector('.bottom-nav');
            
            if (bottomPlayer && bottomNav) {
                // 确保底部导航隐藏，播放器占据合适位置
                bottomNav.classList.remove('transitioning', 'returning');
                bottomPlayer.classList.remove('transitioning', 'returning');
                
                // 为了确保从首页跳转过来时动画连贯，延迟一点点再移除过渡类
                setTimeout(() => {
                    // 这里不需要额外处理，playlist-page类已经通过CSS控制了底部导航的隐藏
                }, 50);
            }
        } else if (window.location.pathname.includes('index.html') || window.location.pathname.endsWith('/') || window.location.pathname.endsWith('music_app/')) {
            // 在首页加载完成时，检查是否是从playlist返回的
            const bottomNav = document.querySelector('.bottom-nav');
            const bottomPlayer = document.querySelector('.bottom-player');
            
            if (bottomNav && bottomPlayer) {
                // 移除可能存在的所有过渡类，恢复正常状态
                bottomNav.classList.remove('transitioning', 'returning');
                bottomPlayer.classList.remove('transitioning', 'returning');
                
                // 确保首页底部导航栏完全显示
                setTimeout(() => {
                    // 这一步可以帮助从playlist返回时有更流畅的体验
                    bottomNav.style.display = 'flex'; // 确保导航栏显示
                }, 50);
            }
        }
    });
}
